<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="../lib//three/three.js"></script>

</head>
<body>

</body>
</html>
<script>
    const clock = new THREE.Clock()
    // 创建一个场景
    const scene = new THREE.Scene()
    // 创建一个相机 视点
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机的位置
    camera.position.set(0, 0, 200)
    camera.lookAt(new THREE.Vector3(0, 0, 0))
    // 创建一个渲染器
    const renderer = new THREE.WebGLRenderer()
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    renderer.setClearColor(0xffffff)

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff)
    spotLight.position.set(2000, 8000, 4000)
    scene.add(spotLight)

    // 基础粒子
    // createNormalSprite();
    function createNormalSprite() {
        for (let i = -5; i < 5; i++) {
            for (let j = -5; j < 5; j++) {
                const material = new THREE.SpriteMaterial({
                    color: Math.random() * 0xffffff
                })
                const sprite = new THREE.Sprite(material)
                sprite.position.set(i * 10, j * 10, 0)
                sprite.scale.set(2, 2, 2)
                scene.add(sprite)
            }
        }
    }
    // 粒子系统创建粒子
    createSystemSprite()
    function createSystemSprite() {
      const geometry = new THREE.Geometry()
      const material = new THREE.PointCloudMaterial({
        size:4,
        vertexColors:true
      })
      for (let i = -5; i < 5; i++) {
        for (let j = -5; j < 5; j++) {
          geometry.vertices.push( new THREE.Vector3(i*10,j*10,0))
          geometry.colors.push(new THREE.Color(Math.random() * 0xffffff))
        }
      }
      scene.add(new THREE.PointCloud(geometry,material))
    }
    const animation = () => {
        renderer.render(scene, camera)
        requestAnimationFrame(animation)
    }
    animation()
</script>